import{d as l,M as t,A as n,h as s}from"./Anchors-CRD96j4l.js";import{D as r,a as o}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const c={path:"/layout/grid",name:"grid",title:"Row/Col 栅格"};function d(i){const e={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...i.components};return t(s,{children:[t("div",{class:"sys-ctx-main-left",children:[t(e.h1,{id:"sp-",children:[l(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:l(e.span,{className:"icon icon-link"})}),c.title]}),t(e.h2,{id:"sp-demos",children:[l(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:l(e.span,{className:"icon icon-link"})}),"代码演示 "]}),l(r,{columns:2}),l(o,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Col, Row, Space } from "cui-solid"

function ColText (props: any) {
    return <div class="col-content" style={{...props.style, 'justify-content': 'center'}}>{props.children}</div>;
}


export default () => {
    return <Space dir="v" size={5}>
        <Row class="demo-row">
            <Col class="demo-col"><ColText>100%</ColText></Col>
        </Row>
        <Row class="demo-row light">
            <Col class="demo-col" grid={0.5}><ColText>50%</ColText></Col>
            <Col class="demo-col light" grid={0.5}><ColText>50%</ColText></Col>
        </Row>
        <Row class="demo-row">
            <Col class="demo-col" grid={1/3}><ColText>1/3</ColText></Col>
            <Col class="demo-col light" grid={1/3}><ColText>1/3</ColText></Col>
            <Col class="demo-col" grid={1/3}><ColText>1/3</ColText></Col>
        </Row>
        <Row class="demo-row light">
            <Col class="demo-col" grid={1/4}><ColText>1/4</ColText></Col>
            <Col class="demo-col light" grid={1/4}><ColText>1/4</ColText></Col>
            <Col class="demo-col" grid={1/4}><ColText>1/4</ColText></Col>
            <Col class="demo-col light" grid={1/4}><ColText>1/4</ColText></Col>
        </Row>
        <Row class="demo-row">
            <Col class="demo-col" grid={2/3}><ColText>2/3</ColText></Col>
            <Col class="demo-col light" grid={1/3}><ColText>1/3</ColText></Col>
        </Row>
    </Space>
}`,scopes:void 0,children:t(e.ul,{children:[`
`,t(e.li,{children:["使用 ",l(e.code,{className:"sp-inline-code",children:"Row"})," 在水平方向创建一行"]}),`
`,t(e.li,{children:["将一组 ",l(e.code,{className:"sp-inline-code",children:"Col"})," 插入在 ",l(e.code,{className:"sp-inline-code",children:"Row"})," 中"]}),`
`,t(e.li,{children:["在每个 ",l(e.code,{className:"sp-inline-code",children:"Col"})," 中，键入自己的内容"]}),`
`,t(e.li,{children:["通过设置 ",l(e.code,{className:"sp-inline-code",children:"Col"})," 的 ",l(e.code,{className:"sp-inline-code",children:"grid"})," 参数，指定跨越的范围, ",l(e.code,{className:"sp-inline-code",children:"grid"})," 范围为0~1"]}),`
`]})}),l(o,{id:"responsive",title:"响应式布局",src:"7responsive.demo.tsx",code:`import { Col, Row, Space } from "cui-solid"

function ColText (props: any) {
    return <div class="col-content" style={{...props.style, 'justify-content': 'center'}}>{props.children}</div>;
}

export default () => {
    return <Space dir="v" size={5} style={{'margin-top': '20px'}}>
        <div>width, offset</div>
        <Row class="example-demo" gutter={16}>
            <Col xs={{grid: 1/6, offset: 1 / 24}} lg={{grid: 0.25, offset: 1 / 12}}><ColText style={{"height": "80px"}}/></Col>
            <Col xs={{grid: 5/12, offset: 1 / 12}} lg={{grid: 0.25, offset: 1 / 12}}><ColText style={{"height": "80px"}}/></Col>
            <Col xs={{grid: 1/6, offset: 1 / 12}} lg={{grid: 0.25, offset: 1 / 12}}><ColText style={{"height": "80px"}}/></Col>
        </Row>
        <div>gutter</div>
        <Row class="example-demo" gutter={{xs: [8, 8], lg: [32, 32]}}>
            <Col grid={1/3}><ColText style={{"height": "80px"}}/></Col>
            <Col grid={1/3}><ColText style={{"height": "80px"}}/></Col>
            <Col grid={1/3}><ColText style={{"height": "80px"}}/></Col>
            <Col grid={1/3}><ColText style={{"height": "80px"}}/></Col>
            <Col grid={1/3}><ColText style={{"height": "80px"}}/></Col>
            <Col grid={1/3}><ColText style={{"height": "80px"}}/></Col>
        </Row>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:["预设六个响应尺寸： ",l(e.code,{className:"sp-inline-code",children:"xs"})," ",l(e.code,{className:"sp-inline-code",children:"sm"})," ",l(e.code,{className:"sp-inline-code",children:"md"})," ",l(e.code,{className:"sp-inline-code",children:"lg"})," ",l(e.code,{className:"sp-inline-code",children:"xl"})," ",l(e.code,{className:"sp-inline-code",children:"xxl"})," ，调整浏览器尺寸来查看效果。",l(e.br,{}),`
`,l(e.code,{className:"sp-inline-code",children:"gutter"})," 也支持响应式，可以通过内嵌到 xs sm md lg xl xxl 属性中来使用"]})}),l(o,{id:"gutter",title:"区块间隔",src:"2gutter.demo.tsx",code:`import { Col, Row, Space } from "cui-solid"

function ColText (props: any) {
    return <div class="col-content" style={{...props.style, 'justify-content': 'center'}}>{props.children}</div>;
}


export default () => {
    return <Space dir="v">
        <Row gutter={16} class="example-demo">
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
        </Row>
        <div>row2</div>
        <Row gutter={[16, 16]} class="example-demo">
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
            <Col grid={1/4}><ColText>1/4</ColText></Col>
        </Row>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:["通过给 ",l(e.code,{className:"sp-inline-code",children:"Row"})," 添加 ",l(e.code,{className:"sp-inline-code",children:"gutter"})," 属性，可以给下属的 ",l(e.code,{className:"sp-inline-code",children:"Col"}),` 添加间距，推荐使用 (16+8n)px 作为栅格间隔。\r
`,l(e.code,{className:"sp-inline-code",children:"gutter"})," 属性支持数字或数组，数组格式为 [水平间距, 垂直间距]。"]})}),l(o,{id:"offset",title:"左右偏移",src:"3offset.demo.tsx",code:`import { Col, Row, Space } from "cui-solid"

function ColText (props: any) {
    return <div class="col-content" style={{...props.style, 'justify-content': 'center'}}>{props.children}</div>;
}


export default () => {
    return <Space dir="v">
        <Row gutter={16} class="example-demo">
            <Col grid={1/4} offset={1/4}><ColText>1/4 offset 1/4</ColText></Col>
            <Col grid={1/4} offset={1/4}><ColText>1/4 offset 1/4</ColText></Col>
        </Row>

        <Row gutter={16} class="example-demo">
            <Col grid={0.5} offset={0.25}><ColText>0.5 offset 0.25</ColText></Col>
        </Row>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:["通过设置 ",l(e.code,{className:"sp-inline-code",children:"offset"})," 属性，将列进行左右偏移，偏移栅格数为 ",l(e.code,{className:"sp-inline-code",children:"offset"})," 的值。"]})}),l(o,{id:"push",title:"栅格排序",src:"4push.demo.tsx",code:`import { Col, Row } from "cui-solid"

function ColText (props: any) {
    return <div class="col-content" style={{...props.style, 'justify-content': 'center'}}>{props.children}</div>;
}


export default () => {
    return <Row class="example-demo">
        <Col grid={3/4} push={1/4}><ColText>3/4 push-1/4</ColText></Col>
        <Col grid={1/4} pull={3/4}><ColText>1/4 pull-3/4</ColText></Col>
    </Row>
}`,scopes:void 0,children:t(e.p,{children:["通过设置 ",l(e.code,{className:"sp-inline-code",children:"push"})," 和 ",l(e.code,{className:"sp-inline-code",children:"pull"})," 来改变栅格的顺序。"]})}),l(o,{id:"justify",title:"flex水平布局",src:"5justify.demo.tsx",code:`import { Col, Row, Space } from "cui-solid"

function ColText (props: any) {
    return <div class="col-content" style={{...props.style, 'justify-content': 'center'}}>{props.children}</div>;
}

export default () => {
    return <Space dir="v" size={5} style={{'margin-top': '20px'}}>
        <div>start</div>
        <Row justify="start" class="example-demo">
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
        </Row>
        <div>end</div>
        <Row justify="end" class="example-demo">
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
        </Row>
        <div>center</div>
        <Row justify="center" class="example-demo">
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
        </Row>
        <div>space-between</div>
        <Row justify="space-between" class="example-demo">
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
        </Row>
        <div>space-around</div>
        <Row justify="space-around" class="example-demo">
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
        </Row>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:["通过给 ",l(e.code,{className:"sp-inline-code",children:"Row"})," 设置参数 ",l(e.code,{className:"sp-inline-code",children:"justify"})," 为不同的值，来定义子元素的排布方式。"]})}),l(o,{id:"align",title:"flex垂直对齐",src:"6align.demo.tsx",code:`import { Col, Row, Space } from "cui-solid"

function ColText (props: any) {
    return <div class="col-content" style={{...props.style, 'justify-content': 'center'}}>{props.children}</div>;
}

export default () => {
    return <Space dir="v" size={5} style={{'margin-top': '20px'}}>
        <Row justify="center" align="top" class="example-demo">
            <Col grid={1/6}><ColText style={{height: '80px'}}>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText style={{height: '100px'}}>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
        </Row>
        <Row justify="center" align="bottom" class="example-demo">
            <Col grid={1/6}><ColText style={{height: '80px'}}>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText style={{height: '100px'}}>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
        </Row>
        <Row justify="center" align="middle" class="example-demo">
            <Col grid={1/6}><ColText style={{height: '80px'}}>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
            <Col grid={1/6}><ColText style={{height: '100px'}}>1/6</ColText></Col>
            <Col grid={1/6}><ColText>1/6</ColText></Col>
        </Row>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:["通过给 ",l(e.code,{className:"sp-inline-code",children:"Row"})," 设置参数 ",l(e.code,{className:"sp-inline-code",children:"align"})," 为不同的值，来定义子元素在垂直方向上的排布方式。"]})}),t(e.h2,{id:"row_props",children:[l(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#row_props",children:l(e.span,{className:"icon icon-link"})}),"Row属性 "]}),t(e.table,{className:"sp-table",children:[l(e.thead,{children:t(e.tr,{children:[l(e.th,{style:{textAlign:"left"},children:"属性"}),l(e.th,{style:{textAlign:"left"},children:"说明"}),l(e.th,{style:{textAlign:"left"},children:"类型"}),l(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),t(e.tbody,{children:[t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"classList"}),l(e.td,{style:{textAlign:"left"},children:"自定义class"}),l(e.td,{style:{textAlign:"left"},children:"Object"}),l(e.td,{style:{textAlign:"left"},children:"-"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"class"}),l(e.td,{style:{textAlign:"left"},children:"自定义class"}),l(e.td,{style:{textAlign:"left"},children:"string"}),l(e.td,{style:{textAlign:"left"},children:"-"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"style"}),l(e.td,{style:{textAlign:"left"},children:"自定义样式"}),l(e.td,{style:{textAlign:"left"},children:"Object"}),l(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"justify"}),l(e.td,{style:{textAlign:"left"},children:"水平居中方式"}),l(e.td,{style:{textAlign:"left"},children:"start | center | end | space-between | space-around"}),l(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"align"}),l(e.td,{style:{textAlign:"left"},children:"垂直居中方式"}),l(e.td,{style:{textAlign:"left"},children:"top | middle | bottom"}),l(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"gutter"}),l(e.td,{style:{textAlign:"left"},children:"间隔"}),l(e.td,{style:{textAlign:"left"},children:"number | number[]"}),l(e.td,{style:{textAlign:"left"},children:"Object"})]})]})]}),t(e.h2,{id:"col_props",children:[l(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#col_props",children:l(e.span,{className:"icon icon-link"})}),"Col属性 "]}),t(e.table,{className:"sp-table",children:[l(e.thead,{children:t(e.tr,{children:[l(e.th,{style:{textAlign:"left"},children:"属性"}),l(e.th,{style:{textAlign:"left"},children:"说明"}),l(e.th,{style:{textAlign:"left"},children:"类型"}),l(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),t(e.tbody,{children:[t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"classList"}),l(e.td,{style:{textAlign:"left"},children:"自定义class"}),l(e.td,{style:{textAlign:"left"},children:"Object"}),l(e.td,{style:{textAlign:"left"},children:"-"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"class"}),l(e.td,{style:{textAlign:"left"},children:"自定义class"}),l(e.td,{style:{textAlign:"left"},children:"string"}),l(e.td,{style:{textAlign:"left"},children:"-"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"style"}),l(e.td,{style:{textAlign:"left"},children:"自定义样式"}),l(e.td,{style:{textAlign:"left"},children:"Object"}),l(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"grid"}),l(e.td,{style:{textAlign:"left"},children:"Col暂用范围0~1"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"},children:"1"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"push"}),l(e.td,{style:{textAlign:"left"},children:"栅格向右移动范围"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"pull"}),l(e.td,{style:{textAlign:"left"},children:"栅格向左移动范围"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"offset"}),l(e.td,{style:{textAlign:"left"},children:"栅格左侧的间隔范围，间隔内不可以有栅格"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"flex"}),l(e.td,{style:{textAlign:"left"},children:"flex 布局属性"}),l(e.td,{style:{textAlign:"left"},children:"string"}),l(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"xs"}),l(e.td,{style:{textAlign:"left"},children:"< 576px 响应式栅格，可为栅格数或一个包含其他属性的对象"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"},children:"Object"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"sm"}),l(e.td,{style:{textAlign:"left"},children:"屏幕 ≥ 576px 响应式栅格，可为栅格数或一个包含其他属性的对象"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"},children:"Object"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"md"}),l(e.td,{style:{textAlign:"left"},children:"屏幕 ≥ 768px 响应式栅格，可为栅格数或一个包含其他属性的对象"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"},children:"Object"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"lg"}),l(e.td,{style:{textAlign:"left"},children:"屏幕 ≥ 992px 响应式栅格，可为栅格数或一个包含其他属性的对象"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"},children:"Object"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"xl"}),l(e.td,{style:{textAlign:"left"},children:"屏幕 ≥ 1200px 响应式栅格，可为栅格数或一个包含其他属性的对象"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"},children:"Object"})]}),t(e.tr,{children:[l(e.td,{style:{textAlign:"left"},children:"xxl"}),l(e.td,{style:{textAlign:"left"},children:"屏幕 ≥ 1600px 响应式栅格，可为栅格数或一个包含其他属性的对象"}),l(e.td,{style:{textAlign:"left"},children:"number"}),l(e.td,{style:{textAlign:"left"},children:"Object"})]})]})]})]}),`
`,`
`,`
`,l(n,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"responsive",title:"响应式布局",src:"7responsive.demo.tsx"},{id:"gutter",title:"区块间隔",src:"2gutter.demo.tsx"},{id:"offset",title:"左右偏移",src:"3offset.demo.tsx"},{id:"push",title:"栅格排序",src:"4push.demo.tsx"},{id:"justify",title:"flex水平布局",src:"5justify.demo.tsx"},{id:"align",title:"flex垂直对齐",src:"6align.demo.tsx"},{id:"row_props",depth:2,title:"Row属性"},{id:"col_props",depth:2,title:"Col属性"}]})]})}function a(i={}){const{wrapper:e}=i.components||{};return e?l(e,{...i,children:l(d,{...i})}):d(i)}export{a as default,c as frontmatter};
